<template>
  <div class="layout-all">
    <control :config="config" />
    <div class="layout-header" style="float:left">
    </div>
    <div class="layout-content">
      <el-table
        :data="tableData"
        stripe
        highlight-current-row
        style="width: 100%;margin-top:50px"
      >
      <el-table-column align="center" prop="id" label="序号" width="70" :fixed="isMobile()?'left':undefined"/>
        <el-table-column align="center" prop="field_str" label="充值类型" width="150" >
          <template slot-scope="scope">
            <div>{{field_str[scope.row.field_str]}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="nickname" label="用户昵称" width="150"/>
        <el-table-column align="center" prop="amount" label="充值数量" width="150"/>
        <el-table-column align="center" prop="pay_amount" label="实际充值金额" width="150"/>
        <el-table-column align="center" prop="sn" label="订单号" width="150"/>
          <el-table-column align="center" prop="pay_status" label="充值状态" width="150" >
          <template slot-scope="scope">
            <div>{{pay_status_arr[scope.row.pay_status]}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="create_time" label="创建时间" width="200" />
        <el-table-column align="center" prop="update_time" label="修改时间" width="200" />
       
      </el-table>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import control from '../../components/control/control'
export default {
  name:'user_recharge',
  components: { control },
  data() {
    return {
      config: [
        { type: 'text', placeholder: '请输入用户昵称', field: 'title', val: '' },
        {
          type: 'select',
          placeholder: '请选择状态',
          field: 'pay_status',
          val: '',
          options: [
            { value: "", label: '全部' },
            { value: 0, label: '待支付' },
            { value: 1, label: '已支付' },
            { value: 2, label: '已取消' },
          ]
        },
      ],
      value: '',
      searchWhere: {
        title: ''
      },
      tableData: [],
      field_str:[],
      pay_status_arr:[],
      total: 0,
      current_page: 1,
      per_page: 14
    }
  },
  activated(){
    // if(this.$getUpdate()){
      this.onSearch()
    // }
  },
  created() {
    this.onSearch()
  },
  methods: {
    // 查询
    handleSizeChange(val) {
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.onSearch()
    },
    onSearch() {
      const form = {}
      form.page = this.current_page
      form.map = this.searchWhere
      this.get('/admin/UserRecharge/index', form, 'POST').then(e => {
        this.field_str = e.field_str
        this.pay_status_arr = e.pay_status_arr
        this.tableData = e.list.data
        this.per_page = e.list.per_page
        this.total = e.list.total
        this.current_page = e.list.current_page
      })
    },
    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      console.log(id)
    },
    // 修改状态
    change_status(id, field, val) {
      this.update(id, val, field, 'UserRecharge').then(e => {
        e ? this.onSearch() : ''
      })
    },
    // 删除
    onDel(id) {
      this.$msg_confirm().then(e => {
        if (e) {
          this.get('/admin/UserRecharge/del?id=' + id, this.form, 'POST').then(e => {
            this.onSearch()
          })
        }
      })
    }
  }
}
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
</style>>
